---
title: State | gluestack-ui
description: gluestack-ui provides an easy way to manage states of components, we will look into easy way to manage different states of components.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="ui/Home/Styling/State" />

import {
  GluestackUIProvider,
  Text,
  Center,
  Button,
  ButtonText,
} from '@gluestack-ui/themed';
import { transformedCode, transformedThemedCode } from '../../../utils';
import Wrapper from '../../../components/Wrapper';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';

# States

Styling of gluestack-ui components is achieved through the utilization of [**`@gluestack-style/react`**](/style), a resource that provides a range of capabilities for effectively controlling states like **hover**, **active**, **focused**, and others. You can pass [`config`](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) file from [**`@gluestack-ui/config`**](https://github.com/gluestack/gluestack-ui/blob/main/packages/config) for default state styling. Config file exports an object which is passed inside the `GluestackUIProvider`. In this context, we will delve into how gluestack-style simplifies the management of these states and their associated styles.

Easiest way to change styling of states would be using `sx` prop which enables state management.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      <Button sx = {{ ":hover": {
        backgroundColor:"$red500"
        }
      }}>
        <ButtonText>Hello world</ButtonText>
      </Button>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
        Button,
        ButtonText,
      },
      argsType: {},
    }}
  />
</AppProvider>

<br />

We can define styles that can be applied on different states and pass them as an object in `sx` prop. For more details, checkout [State Based Styles](https://gluestack.io/style/docs/api/state-bases-styles) documentation.

### Supported States are the following on basis of the component:

- indeterminate
- checked
- readOnly
- required
- invalid
- focus
- focusVisible
- hover
- pressed
- active
- loading
- disabled